<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./bootstrap-5.3.0-dist/css/bootstrap.min.css">
  <title>Document</title>
</head>
<body>
  <div class="container mt-3">
    <div class="card" style="width: 20rem">
      <img src="images/orange.png" alt="" class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">商品名称</h5>
        <p>商品价格：￥100.00</p>
        <p>商品销量：200</p>
        <p>商品评价：4.8分</p>
        <a href="#" class="btn btn-primary">加入购物车</a>
        <a href="#" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="跳转到<u>详情页</u>" data-bs-html="true">查看详情</a>
      </div>
    </div>
  </div>
  <script src="bootstrap-5.3.0-dist/js/bootstrap.bundle.min.js"></script>
  <script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl);
    });
  </script> 
</body>
</html>